@charset"UTF-8";
$fontSize:40;   
@function r($p) {
    @return $p/$fontSize*1rem;
}
*{
    font-size: 0;
}
html,body{
    height: 100%;
    width: 100%;
}
html{
    font-size: 40px;
}
.web{
    width: 100%;
    height: 100%;
    position:relative;
    padding-top: r(75);
    >.top{
        width: 100%;
        height: r(75);
        line-height:r(75) ;
        text-align: center;
        font-size: r(30);
        color: #343434;
        border-bottom: 1px solid #7f7f7f;
        position: absolute;
        top:0
    }
    >.content{
        width: 100%;
        height: 100%;
        overflow: auto;
        padding-bottom: r(90);
        >.first{
            >#checkboxOne:checked+.one>ul>li:last-of-type>label>img{
                transform: rotate(90deg) ;
            }
            >#checkboxOne:checked+.one>.xiala1{
                display: block;
            }
            >#checkboxTwo:checked+.two>ul>li:last-of-type>label>img{
                transform: rotate(90deg) ;
            }
            >#checkboxTwo:checked+.two>.xiala2{
                display: block;
            }
            >.one{
                >ul:first-of-type{
                    border-bottom: 1px solid #ececec;
                    height: r(98);
                    width: 100%;
                    padding-left: r(28);
                    padding-right: r(28);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    >li:first-of-type{
                        >img{
                            width: r(26);
                            height: r(30);
                            margin-right: r(20);
                            display: inline-block;
                            vertical-align: middle;
                        }
                        >span:first-of-type{
                            display: inline-block;
                            vertical-align: middle;
                            font-size: r(24);
                            margin-right: r(20);
                        }
                        >span:last-of-type{
                            font-size: r(24);
                            color: #a3a3a3;
                            display: inline-block;
                            vertical-align: middle;
                        }
                    }
                    >li:last-of-type{
                        >label{
                            >img{
                                width: r(14);
                                height: r(24);
                            }
                        }
                    }
                }
                >.xiala1{
                    display: none;
                    >ul{
                        height: r(120);
                        padding-left: r(30) ;
                        padding-right: r(30);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-bottom: 1px solid #dbdbdb;
                        >li:first-of-type{
                            >img{
                                display: inline-block;
                                vertical-align: middle;
                                width: r(84);
                                height: r(84);
                                margin-right: r(20);
                                
                            }
                            >div{
                                display: inline-block;
                                vertical-align: middle;
                                >p:first-of-type{
                                    margin-bottom: r(12);
                                    font-size: 0.6rem;
                                }
                                >p:last-of-type{
                                    font-size: 0.6rem;
                                    color: #a3a3a3;
                                }
                            }
                        }
                        >li:last-of-type{
                            font-size:0.6rem;
                            color: #a3a3a3;
                        }
                        
                    }
                }
            }
            >.two{
                >ul:first-of-type{
                    border-bottom: 1px solid #ececec;
                    height: r(98);
                    width: 100%;
                    padding-left: r(28);
                    padding-right: r(28);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    >li:first-of-type{
                        >img{
                            width: r(26);
                            height: r(30);
                            margin-right: r(20);
                            display: inline-block;
                            vertical-align: middle;
                        }
                        >span:first-of-type{
                            display: inline-block;
                            vertical-align: middle;
                            font-size: r(24);
                            margin-right: r(20);
                        }
                        >span:last-of-type{
                            font-size: r(24);
                            color: #a3a3a3;
                            display: inline-block;
                            vertical-align: middle;
                        }
                    }
                    >li:last-of-type{
                        >label{
                            >img{
                                width: r(14);
                                height: r(24);
                            }
                        }
                    }
                }
                >.xiala2{
                    display: none;
                    >ul{
                        height: r(120);
                        padding-left: r(30) ;
                        padding-right: r(30);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-bottom: 1px solid #dbdbdb;
                        >li:first-of-type{
                            >img{
                                display: inline-block;
                                vertical-align: middle;
                                width: r(84);
                                height: r(84);
                                margin-right: r(20);
                                
                            }
                            >div{
                                display: inline-block;
                                vertical-align: middle;
                                >p:first-of-type{
                                    margin-bottom: r(12);
                                    font-size: 0.6rem;
                                }
                                >p:last-of-type{
                                    font-size: 0.6rem;
                                    color: #a3a3a3;
                                }
                            }
                        }
                        >li:last-of-type{
                            font-size:0.6rem;
                            color: #a3a3a3;
                        }
                        
                    }
                }
            }
        }
        >.second{
           width: 100%;
           >.title{
               display: flex;
               height: r(55);
               background: #f2f2f2;
               align-items: center;
               padding-left: r(30);
               >span{
                   font-size: r(24);
                   color: #9b9b9b;
               }
           }
            >.xiala{
                >ul{
                        height: r(120);
                        padding-left: r(30) ;
                        padding-right: r(30);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-bottom: 1px solid #dbdbdb;
                        >li:first-of-type{
                            >img{
                                display: inline-block;
                                vertical-align: middle;
                                width: r(84);
                                height: r(84);
                                margin-right: r(20);
                                
                            }
                            >div{
                                display: inline-block;
                                vertical-align: middle;
                                >p:first-of-type{
                                    margin-bottom: r(12);
                                    font-size: 0.6rem;
                                }
                                >p:last-of-type{
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    width: r(204);
                                    font-size: 0.5rem;
                                    color: #a3a3a3;
                                }
                            }
                        }
                        >li:last-of-type{
                            font-size:0.6rem;
                            color: #a3a3a3;
                        }
                        
                    }
            }
        }
        >.third{
            width: 100%;
            >ul{
                border-bottom: 1px solid #ececec;
                    height: r(98);
                    width: 100%;
                    padding-left: r(28);
                    padding-right: r(28);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    >li:first-of-type{
                        >img{
                            width: r(26);
                            height: r(30);
                            margin-right: r(20);
                            display: inline-block;
                            vertical-align: middle;
                        }
                        >span:first-of-type{
                            display: inline-block;
                            vertical-align: middle;
                            font-size: r(24);
                            margin-right: r(20);
                        }
                        >span:last-of-type{
                            font-size: r(24);
                            color: #a3a3a3;
                            display: inline-block;
                            vertical-align: middle;
                        }
                    }
                    >li:last-of-type{
                            >img{
                                width: r(14);
                                height: r(24);
                            }
                    }
            }
        }
        >.fourth{
            >.lalala{
            >ul{
                height: r(120);
                padding-left: r(30) ;
                display: flex;
               justify-content: space-between;
                 align-items: center;
              border-bottom: 1px solid #dbdbdb;
                >li:first-of-type{
                   >img{
                      display: inline-block;
                       vertical-align: middle;
                     width: r(70);
                         height: r(70);
                      margin-right: r(20);
                    }
                            >div{
                                display: inline-block;
                                vertical-align: middle;
                                >p:first-of-type{
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    width: r(260);
                                    margin-bottom: r(12);
                                    font-size: 0.5rem;
                                    color: #9b9b9b;
                                }
                                >p:last-of-type{
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    width: r(280);
                                    font-size: 0.4rem;
                                    color: #9b9b9b;
                                }
                            }
                        }
                        >li:last-of-type{
                            height: auto;
                            width: r(240);
                            background: linear-gradient( to right, #cccccc 50%,#7f7f7f 50%);
                            >div{
                                display: inline-block;
                                color:white;
                                width: 50%;
                                text-align: center;
                                font-size: r(24);
                                line-height:r(120) ;
                            }
                        }
                        
                    }
                }    
        }
    }
    >.foot{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: r(81);
        >ul{
            width:14.6rem;
            margin: 0 auto ;
            display: flex;
            -webkit-diaplay:flex;
            justify-content: space-between;
            >li{
                display: flex;
                -webkit-diaplay:flex;
                align-items: flex-end;
                img{
                    width: 1.5rem;
                    height: 1.5rem;
                    opacity: 1.0;
                }
            }
            >li:nth-of-type(3){
                >img{
                    width: 2.525rem;
                    height: 2.025rem;
                }
            }
            
        }
    }
}
